<template>
  <div class="page-content">
     <div class="content-body">
             <el-tabs v-model="activeName" @tab-click="handleClick">
               <el-tab-pane label="关注" name="first">
                <FollowedArticles></FollowedArticles>
               </el-tab-pane>
               <el-tab-pane label="推荐" name="second">推荐</el-tab-pane>
               <el-tab-pane label="热榜" name="third">热榜</el-tab-pane>
             </el-tabs>
     </div>
     <div class="page-right">
       <h3>向你推荐</h3>
     </div>
  </div>
</template>

<script>
import FollowedArticles from "@/components/home/FollowedArticles.vue";
import {getFollowArticles} from "@/api/article";
export default {
      name:"PageContent",
  components:{
    FollowedArticles
  },
  data() {
    return {
      activeName: 'first'
    };
  },
  methods: {
    handleClick(tab, event) {

    }
  },mounted() {
    getFollowArticles().then(res=>{
      this.$store.commit("setfollowArticles",res)
    });
  }
}
</script>

<style>
.page .page-content{
width: 1190px;
height: fit-content;
position: absolute; 
top: 630px;
left:105px;
  display: flex;

}
.page-content .content-body{
 width: 854px;
 height: 100%;
}
.page-content .content-ch{
    width: 854px;
    height: 48px;
    position: relative;
}
.content-ch .content-changer{
    width: 460px;
    height: 48px;
    line-height: 48px;
}
.content-changer ul li{
    display: inline;
}
.content-changer ul li a{
    display: inline-block;
    text-decoration: none;
    color: #000;
    font-size: 15px;
    margin-right:40px ;
}

/*tab部分*/
.el-tabs__item.is-active {
  color: black;
  font-weight: bolder;

}
.el-tabs__item:hover{
  color: black!important;
  font-weight: bolder;
}
.el-tabs__nav-scroll{
  padding-left: 30px;
  font-size: 16px!important;
  width: 100%;
}
.el-tabs__active-bar {
  background-color: black!important;
}
.el-tabs__header{
  margin-bottom: 0px;
}
.el-tabs__nav-wrap::after{
  width: 1000px;
  display: none;
}
.el-tabs{
  width: 100%;
}
/*右边*/
.page-right{
  float: right;
}
</style>